<template>
  <view class="articles-detail">
    <view class="a-title">{{ info.title }}</view>
    <view class="a-des">
      <view class="a-time">{{ info.createTime }}</view>
      <view class="a-view">阅读数: <text>{{ info.views }}</text></view>
    </view>
    <view class="a-content">
       <rich-text :nodes="renderContent(info.content)"></rich-text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        info: {}
      }
    },
    onLoad(query) {
      this.id = query.id
      this.getData()
      
      
    },
    methods: {
      getData() {
        this.$http({
          url: `/article/getArticleInfo?articleId=${this.id}`
        }).then(res => {
          this.info = res.data.articleInfo
          this.setShare()
        })
      },
      renderContent(content) {
        return content ? content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') : ''
      },
      setShare() {
        uni.showShareMenu({
          title: this.info.title,
          content: this.info.description,
        })
      }
    },
    onShareAppMessage() {
      return {
        title: this.info.title,
        path: '/pages/article/detail?id=' + this.id
      }
    },
    onShareTimeline() {
      return {
        title: this.info.title,
        query: 'id=' + this.id
      }
    }
  }
</script>

<style lang="less">
  .articles-detail{
    padding: 20rpx;
    .a-title{
      font-size: 34rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .a-des{
      display: flex;
      margin-bottom: 30rpx;
      .a-time{
        font-size: 24rpx;
        color: #333;
      }
      .a-view{
        margin-left: 40rpx;
        font-size: 24rpx;
        color: #333;
      }
    }
    .a-content{
      font-size: 28rpx;
      color: #333;
    }
   }
</style>
